<template>
    <div class="tmpl">
        <div id="postcomment">
			<h3>提交评论</h3>
			<p class="p"></p>
			<textarea placeholder="请输入您要评论的内容..." v-model="postcontent"></textarea>
			<mt-button type="primary" size="large" @click="postComment">发表</mt-button>
		</div>

		<!--2.0 实现获取评论数据列表-->
		<div id="list">
			<h3>评论列表</h3>
			<p class="p"></p>
			<div v-for="(item,index) in comments" :key=item.content>
				<div class="title">
					<span>第{{index + 1}}楼:</span>
					<span>用户：{{item.user_name}}</span>
					<span>发表时间：{{item.add_time | datefmt('YYYY-MM-DD HH:mm:ss')}}</span>
				</div>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell" v-text="item.content"></li>
				</ul>
			</div>
		</div>
		<!--3.0 实现获取更多按钮-->
		<mt-button type="danger" size="large" plain @click="loadMore">加载更多</mt-button>
    </div>
</template>
<script>
    import common from "../../../statics/js/common.js";
    export default{
        props:["artid"],
        data(){
            return{
                pageindex:1,
                postcontent:"",//用于存放用户输入的内容
                comments:[]
            }
        },
        created(){
            this.getComment();
        },
        methods:{
            getComment(pageIndex){
                pageIndex = pageIndex || 1;
                this.$http.get(common.domain+"/api/getcomments/"+this.artid+"?pageindex="+pageIndex).then((re)=>{
                    if(re.body.status != 0){
                        this.$tosat(re.body.message);
                        return;
                    }
                    this.comments = this.comments.concat(re.body.message);
                });
            },
            loadMore(){
                this.pageindex++;
                this.getComment(this.pageindex);
            },
            postComment(){
                this.$http.post(common.domain+"/api/postcomment/"+this.artid,{content:this.postcontent}).then(re=>{
                    if(re.body.status == 0){
                        this.$toast(re.body.message)
                        this.comments = [{
                            "user_name": "匿名用户",
						    "add_time": new Date(),
						    "content": this.postcontent
                        }].concat(this.comments);
                        this.postcontent = '';
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
#postcomment{
	padding: 5px;
}
.p{
	height: 1px;
	width: 100%;
	border-bottom: 1px solid rgba(0,0,0,0.3);
}
#list{
	padding: 5px;
}
.title{
	padding: 5px;
	color: #6d6d72;
	font-size: 15px;
	background-color: rgba(0,0,0,0.1);
}
</style>


